import { Input, Space } from "antd"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useLocale } from "@/locales"
import { dict } from "@/locales/en-US/context/dict"

const LoginTerminal: FC<any> = () => {
	const data = Object.entries(dict.dict.device_type).slice(0, 5)
	const deviceOptions = data.map((item, index) => ({ value: index + 1, label: item[1].description }))

	const typeOptions = ["Login IP", "IP归属地", "终端设备号"].map((item, index) => ({ value: `${index + 1}`, label: item }))

	const { formatMessage } = useLocale()
	return (
		<SFormItem label={`${formatMessage({ id: "label.login_terminal" })}:`}>
			<Space.Compact>
				<SFormItem noStyle name="loginTerminal" label={`${formatMessage({ id: "label.login_terminal" })}:`}>
					<StyleSelect placeholder={formatMessage({ id: "common.all" })} allowClear options={deviceOptions} />
				</SFormItem>
				<SFormItem noStyle name={["filterOptions", "id"]} label={`${formatMessage({ id: "label.login_terminal" })}:`}>
					<StyleSelect
						placeholder={formatMessage({ id: "label.select_all" })}
						allowClear
						defaultValue={"1"}
						options={typeOptions}
					/>
				</SFormItem>
				<SFormItem noStyle name={["filterOptions", "value"]} label={`${formatMessage({ id: "label.login_terminal" })}:`}>
					<Input placeholder={formatMessage({ id: "label.please_enter" })} allowClear />
				</SFormItem>
			</Space.Compact>
		</SFormItem>
	)
}

export default LoginTerminal
